import React, { useEffect, useState } from 'react'
import { Button, Card, Table, Space } from "antd"
import { findAllRoleApi } from "../../../apis/roleApi"
import Auth from '../../../components/Auth'

export default function Role() {
  const [dataSource, setDataSource] = useState([])
  const [open,setOpen] = useState(false)
  const [role,setRole] = useState({})
  useEffect(() => {
    fetchData()
  }, [])
  const fetchData = async () => {
    const res = await findAllRoleApi()
    console.log("角色列表",res);
    setDataSource(res.data.data)
  }

  const closeOpen = ()=>{
    setOpen(false)
  }
  const openDrawer = (value)=>{
    console.log(value);
    setRole(value)
    setOpen(true)
  }
  // 表头的数据
  const columns = [
    {
      title: '角色名字',
      dataIndex: 'name',
    },
    {
      title: '创建日期',
      dataIndex: 'createTime',
    },
    {
      title: '授权人',
      dataIndex: 'authUser',
    },
    {
      title: '授权日期',
      dataIndex: 'authTime',
    },
    {
      title: '操作',
      render: (p1, p2) => {
        return (
          <Space size="middle">
            <Button onClick={()=>openDrawer(p1)} type='primary'>授权</Button>
            <Button type='primary'>删除</Button>
          </Space>
        )
      }
    },
  ];
  return (
    <>
      <Card
        title={"角色列表"}
        extra={<Button type='primary'>添加</Button>}
        style={{
          width: "100%",
        }}
        loading={false}
      >
        <Table
          dataSource={dataSource}
          columns={columns}
          rowKey="_id"
          bordered={true}
          loading={false}
          pagination={{ defaultCurrent: 1, defaultPageSize: 6, showSizeChanger: true, pageSizeOptions: [3, 6, 9], showQuickJumper: true }}

        />
      </Card>
      <Auth open={open} role={role} closeOpen={closeOpen}></Auth>
    </>
  )
}
